<template>
    <div class="approval_screen">
        <!-- 招商部门 -->
        <div v-if="(type === 'invest' && user.user.indexOf('recruitStaff') == -1)" class="approval_screen_category"
            @click="investClick">
            {{ investmentName }}
            <van-image :src="dropDown"></van-image>
        </div>
        <!-- 产品部门 -->
        <div v-if="type === 'product' || type === 'product_price'" class="approval_screen_category"
            @click="investmentShows = true">
            {{ productName }}
            <van-image :src="dropDown"></van-image>
        </div>
        <!-- 运营部门 -->
        <div v-if="type === 'operation'" class="approval_screen_category" @click="operationShow = true">
            {{ operationName }}
            <van-image :src="dropDown"></van-image>
        </div>
        <!-- 招商审批类型 -->
        <div v-if="type === 'invest'" class="approval_screen_category"
            @click="investcategoryShow = true">
            {{ investcategoryName }}
            <van-image :src="dropDown"></van-image>
        </div>
        <!-- 产品审批类型 -->
        <div v-if="type === 'product'|| type === 'operation'" class="approval_screen_category" @click="productcategoryShow = true">
            {{ productcategoryName }}
            <van-image :src="dropDown"></van-image>
        </div>
        <!-- 产品接收状态 -->
        <div v-if="type === 'product_price'" class="approval_screen_category" @click="product_PriceShow = true">
            {{ product_PriceName }}
            <van-image :src="dropDown"></van-image>
        </div>
        <!-- 提交日期 -->
        <div v-if="type === 'invest' || type === 'product' || type === 'product_price' || type === 'operation'"
            class="approval_screen_date" @click="dateShow = true">
            {{ dateName }}
            <van-image :src="dropDown"></van-image>
        </div>
        <slot></slot>

        <van-action-sheet title="招商部门" v-model:show="investmentShow" :actions="investmentList"
            @select="onSelectInvestment" />
        <van-action-sheet title="审批类型" v-model:show="investcategoryShow" :actions="investcategoryList"
            @select="onSelectInvestCategory" />
        <van-action-sheet title="审批类型" v-model:show="productcategoryShow" :actions="productcategoryList"
            @select="onSelectProductCategory" />
        <van-action-sheet title="接收状态" v-model:show="product_PriceShow" :actions="product_PriceList"
            @select="onSelectProductPrice" />
        <van-action-sheet title="提交日期" v-model:show="dateShow" :actions="dateyList" @select="onSelectDate" />
        <!-- 宋丝语 产品部 -->
        <van-popup v-model:show="investmentShows" round position="bottom">
            <van-picker title="部门" :columns="investmentList" @confirm="investmentListonConfirm"
                @cancel="investmentShows = false" :columns-field-names="customFieldName" />
        </van-popup>
        <!-- 运营 -->
        <van-popup v-model:show="operationShow" round position="bottom">
            <van-picker title="运营部门" :columns="operationList" @confirm="onSelectOperation" @cancel="operationShow = false"
                :columns-field-names="customFieldName" />
        </van-popup>
        <van-popup v-model:show="productShow" round position="bottom">
            <van-picker title="部门" :columns="columns" @confirm="onConfirm" @cancel="onCancel"
                :columns-field-names="customFieldName" />
        </van-popup>
    </div>
</template>

<script setup lang="ts">
import { ref, defineProps, defineEmits, watch, onMounted } from 'vue'
import { getDeptAndUserTreeList } from '@/api/approval/index'
import { userStore } from "@/store/user";
import { deptTree } from '@/api/productList/index'
const dropDown = new URL("@/assets/approval/drop_down .png", import.meta.url).href
import { getLastNonEmptyValue, getLastNonEmptyList } from '@/utils'
const user = userStore();
const props = defineProps({
    value: { type: Object, default: {} },
    type: { type: String, default: 'invest' } // invest：招商，product：产品,product_price:产品变价接收，operation：运营
})
const emit = defineEmits(['update:value', 'onSubmit'])

// 招商部门
const investmentName = ref('全部')
const investmentShow = ref(false)
const investmentShows = ref(false)
const investmentList = ref([])
// 运营部门
const operationName = ref('部门')
const operationShow = ref(false)
const operationList = ref([])
// 产品部门
const productName = ref('部门')
const productShow = ref(false)
// 招商审批类型
const investcategoryName = ref('')
const investcategoryShow = ref(false)
const investcategoryList = ref([])
// 产品审批类型
const productcategoryName = ref('')
const productcategoryShow = ref(false)
const productcategoryList = ref([
    { name: '全部', status: '' },
    { name: '待审批', status: '0' },
    { name: '已通过', status: '2' },
    { name: '已驳回', status: '1' },
])
// 产品接收状态
const product_PriceName = ref('')
const product_PriceShow = ref(false)
const product_PriceList = ref([
    { name: '全部', status: '' },
    { name: '待接收', status: '0' },
    { name: '已接收', status: '2' },
])

// 提交日期
const dateName = ref('')
const dateShow = ref(false)
const dateyList = ref([
    { name: "全部", status: null },
    { name: "近一周", status: 7 },
    { name: "近一月", status: 30 },
    { name: "近半年", status: 180 },
])


/** 招商部门点击事件 */
const investClick = () => {
    // 宋丝语
    if (user.user.indexOf('recruitLeader') != -1 || user.user.indexOf('recruitContractAudit') != -1) {
        investmentShows.value = true
    } else {
        investmentShow.value = true
    }
}

// 产品部门数据
const columns = ref()

/** 取消产品部门选择  */
const onCancel = () => {
    productShow.value = false
}
/** 产品部门选择 */
const onConfirm = ({ selectedValues, selectedOptions }) => {
    productShow.value = false
    let params = JSON.parse(JSON.stringify(props.value))
    params.recruiterDeptId = getLastNonEmptyValue(selectedValues)
    productName.value = getLastNonEmptyList(selectedOptions).label
    emit('update:value', params)
    emit('onSubmit')
}
const customFieldName = ref({
    text: 'label',
    value: 'id',
    children: 'children',
})
/** 获取产品部门列表 */
const getProductColumnList = async () => {
    const res = await getDeptAndUserTreeList({})
    columns.value = res.data
}
// 招商部门选择事件
const onSelectInvestment = (selection: any) => {
    investmentShow.value = false;
    let params = JSON.parse(JSON.stringify(props.value))
    params.recruiterDeptId = selection.status
    emit('update:value', params)
    emit('onSubmit')
}
// 运营部门选择事件
const onSelectOperation = ({ selectedValues, selectedOptions }) => {
    operationShow.value = false
    let params = JSON.parse(JSON.stringify(props.value))
    params.coreDeptId = getLastNonEmptyValue(selectedValues)
    operationName.value = getLastNonEmptyList(selectedOptions).label
    emit('update:value', params)
    emit('onSubmit')
}
/** 招商部门选择事件 宋丝语*/
const investmentListonConfirm = ({ selectedValues, selectedOptions }) => {
    investmentShows.value = false;
    let params = JSON.parse(JSON.stringify(props.value))
    params.recruiterDeptId = getLastNonEmptyValue(selectedValues)
    investmentName.value = getLastNonEmptyList(selectedOptions).label
    productName.value = getLastNonEmptyList(selectedOptions).label
    emit('update:value', params)
    emit('onSubmit')
}
/** 招商审批状态选择事件 */
const onSelectInvestCategory = (selection: any) => {
    investcategoryShow.value = false;
    let params = JSON.parse(JSON.stringify(props.value))
    params.auditType = selection.status
    emit('update:value', params)
    emit('onSubmit')
}
/** 产品审批状态选择事件 */
const onSelectProductCategory = (selection: any) => {
    productcategoryShow.value = false;
    let params = JSON.parse(JSON.stringify(props.value))
    params.status = selection.status
    emit('update:value', params)
    emit('onSubmit')
}

/** 接收状态选择事件 */
const onSelectProductPrice = (selection: any) => {
    product_PriceShow.value = false;
    let params = JSON.parse(JSON.stringify(props.value))
    params.status = selection.status
    emit('update:value', params)
    emit('onSubmit')
}

/** 提交日期选择事件 */
const onSelectDate = (selection: any) => {
    dateShow.value = false;
    let params = JSON.parse(JSON.stringify(props.value))
    params.startTime = selection.status
    emit('update:value', params)
    emit('onSubmit')
}
// 招商审批类型列表 0：审批中，1：已通过，2：已驳回
const getInvestcategoryList = () => {
    let arr: any = []
    if (props.value.status == 0) {
        arr = [
            { name: '全部', status: '' },
            { name: '核价初审', status: '7' },
            { name: '核价复审', status: '11' },
            { name: '无合同入库', status: '22' },
            { name: '产品部入库', status: '16' },
            { name: '已入库变价', status: '19' }
        ]
    } else if (props.value.status == 1) {
        arr = [
            { name: '全部', status: '' },
            { name: '核价初审', status: '11' },
            { name: '核价复审', status: '13' },
            { name: '无合同入库', status: '15' },
            { name: '产品部入库', status: '18' },
            { name: '已入库变价', status: '21' }
        ]
    } else {
        arr = [
            { name: '全部', status: '' },
            { name: '核价初审', status: '8,9,10' },
            { name: '核价复审', status: '12' },
            { name: '无合同入库', status: '14' },
            { name: '产品部入库', status: '17' },
            { name: '已入库变价', status: '20' }
        ]
    }
    investcategoryList.value = arr
}

watch(() => props.value, () => {
    if (user.user.indexOf('recruitLeader') == -1 && user.user.indexOf('recruitContractAudit') == -1) {
        // 招商部门
        let inv: any = investmentList.value.find((item: any) => {
            return item.status === props.value.recruiterDeptId
        })
        if (inv) {
            investmentName.value = inv.name === '全部' ? '部门' : inv.name
        } else {
            investmentName.value = '部门'
        }
    }
    // 招商审批类型
    let investcategory: any = investcategoryList.value.find((item: any) => {
        return item.status === props.value.auditType
    })
    if (investcategory) {
        investcategoryName.value = investcategory.name === '全部' ? '审批类型' : investcategory.name
    } else {
        investcategoryName.value = '审批类型'
    }
    // 产品审批类型
    let productcategory = productcategoryList.value.find(item => {
        return item.status === props.value.status
    })
    if (productcategory) {
        productcategoryName.value = productcategory.name === '全部' ? '审批类型' : productcategory.name
    } else {
        productcategoryName.value = '审批类型'
    }
    // 产品接收状态
    let product_Price = product_PriceList.value.find(item => {
        return item.status === props.value.status
    })
    if (product_Price) {
        product_PriceName.value = product_Price.name === '全部' ? '接收状态' : product_Price.name
    } else {
        product_PriceName.value = '接收状态'
    }
    // 提交日期
    let datey = dateyList.value.find(item => {
        return item.status === props.value.startTime
    })
    if (datey) {
        dateName.value = datey.name === '全部' ? '提交日期' : datey.name
    } else {
        dateName.value = '提交日期'
    }
    getInvestcategoryList()
}, { deep: true, immediate: true })


/** 获取招商品类列表 */
const GetSystemList = async () => {
    const res = await getDeptAndUserTreeList({})
    if (res.data && res.data.length) {
        if (user.user.indexOf('recruitLeader') != -1) {
            // 取招商部
            const department = res.data.filter(item => item.id == '1861962988832542721')[0].children
            department.unshift({
                label: '全部',
                id: null,
                children: []
            })
            department.forEach(element => {
                element.children.unshift({
                    label: '全部',
                    id: ''
                })
            });
            investmentList.value = department
        } else if (user.user.indexOf('recruitContractAudit') != -1) { //无合同
            res.data.unshift({
                label: '全部',
                id: null,
                children: []
            })
            res.data.forEach(element => {
                element.children.unshift({
                    label: '全部',
                    id: ''
                })
            });
            investmentList.value = res.data
        } else if (user.user.indexOf('stock') != -1) { //产品
            res.data.unshift({
                label: '全部',
                id: null,
                children: []
            })
            res.data.forEach(element => {
                element.children.unshift({
                    label: '全部',
                    id: ''
                })
            });
            investmentList.value = res.data
        } else {
            res.data.forEach(item => {
                item.name = item.label
                item.status = item.id
                item.color = '#323233'
            })
            res.data.unshift({
                label: '全部',
                id: null,
                name: '全部',
                status: null,

            })
            investmentList.value = res.data
        }
    }
}
/** 获取运营部门 */
const GetAnotherList = async () => {
    const res = await deptTree({ deptId: '1782395835898970113' })
    res.data.unshift({
        label: '全部',
        id: null,
        children: [
            {
                id: '',
                label: '全部'
            }
        ]
    })
    res.data.forEach(item => {
        item.label = item.label.slice(0, 6)
        if (!item.children) {
            item.children = [
                {
                    label: item.label.slice(0, 6),
                    id: item.id,
                    parentId: item.id,
                    weight: 1
                }

            ]
        }
    })
    operationList.value = res.data
}


onMounted(() => {
    GetSystemList()
    GetAnotherList()
    getProductColumnList()
})

</script>

<style lang="less" scoped>
.approval_screen {
    height: 44px;
    margin-top: 10px;
    // margin-bottom: 10px;
    width: 100%;
    background-color: #fff;
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 14px;
    border-radius: 15px 15px 0px 0px;

    :deep(.van-image) {
        width: 10px;
        height: 6px;
        margin-left: 4px;
    }

    .approval_screen_category {
        width: 0;
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .approval_screen_date {
        width: 0;
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
</style>